<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{/public :: #public_head}">
    <style>
        .motaiimg {
            width: 800px;
            height: 600px;
            position: absolute;
            object-fit: scale-down;
        }
    </style>
</head>
<body>
<div class="container">
    <div th:replace="~{/public :: #public_header}"></div>
    <div th:replace="~{/public :: #public_time}"></div>
    <div class="main">
        <div th:replace="~{/public :: #public_left(activeUri='article')}"></div>
        <div class="right">
            <div class="form-add">
                <div style="display: flex;justify-content: space-between;">
                    <div>
                        <p>文章标题：<span th:text="${article.title}"></span></p>
                        <p>文章作者：<span th:text="${article.createUserName}"></span></p>
                        <p>文章分类：<span th:text="${article.categoryName}"></span></p>
                        <p>文章内容：<span th:text="${article.content}"></span></p>
                        <p>发布状态：<span th:text="${article.state}"></span></p>
                        <p>是否有效：<span th:text="${article.active == 1 ? '是' : '否'}"></span></p>
                        <p>创建时间：<span th:text="${#temporals.format(article.createTime, 'yyyy-MM-dd hh:MM:SS')}"></span></p>
                        <p>更新时间：<span th:text="${#temporals.format(article.updateTime, 'yyyy-MM-dd hh:MM:SS')}"></span></p>
                        <div>
                            <button type="submit" onclick="history.back(-1)">返回</button>
                        </div>
                    </div>
                    <div>
                        <img id="temp" th:src="${article.coverImg}" alt="" width="200" height="300" onclick="fnReal(this)">
                        <!--图片模态框 -->
                        <div class="motai" id="mo" style="display: none">
<!--                            <button id="btn" class="btn01" onClick="printdiv()">打印</button>-->
<!--                            <button id="btn1" class="btn02" onClick="xuanzhuan()">旋转</button>-->

<!--                            <span class="close" id="close" onclick="fnClose()">×</span>-->
                            <div id="mo2" onclick="closeimg()">
                                <img class="motaiimg" id="moimg" src="" onclick="closeimg()">
                            </div>
                            <div id="caption"></div>
                        </div>
<!--                        <iframe id="printf" src="" width="0" height="0" frameborder="0"></iframe>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="~{/public :: #public_footer}"></div>
</div>
</body>
<script>
    function fnReal(obj) {
        $("#temp").css("display","none")
        $(".motai").css("display","block");
        //$(".motaiimg").src=this.src;
        $("#moimg").attr("src",obj.src);
        //按原尺寸显示
        $("#moimg").css("width","800px");
        $("#moimg").css("height","600px");
        $("#moimg").css("object-fit","scale-down");
        // var iframe=document.getElementById("printf");
        // var el = document.getElementById("mo2");
        // doc = iframe.contentWindow.document;
        // doc.write('<div>' + el.innerHTML + '</div>');
        // doc.close();
    }
    function closeimg() {
        fnClose();
    }
    function fnClose() {
        $(".motai").css("display","none");
        // current = 0;
        // document.getElementById('moimg').style.transform = 'rotate('+current+'deg)';
        $("#temp").css("display","block")
    }
</script>
</html>